import { ReactViewState, ReactView, reactControl, ReactViewControl } from "pao-aop-client";
import React from "react";
import { addon } from "pao-aop";
// import Grid from "antd-mobile/lib/grid";
import { Grid, SearchBar, Card, Button, ListView } from 'antd-mobile';
import { ROUTE_PATH } from "src/projects/app/util-tool";
import { FontIcon } from "src/projects/components/icon";
import { Carousel, Rate, Spin, Row } from "antd";
import { AppServiceUtility } from "src/projects/app/appService";
import './index.less';
// import { request } from "src/business/util_tool";
// import { AppServiceUtility } from "src/projects/app/appService";
// import { AppServiceUtility } from "src/projects/app/appService";
// import { request } from "src/business/util_tool";
// const Item = List.Item;
/**
 * 组件：居家养老首页状态
 */
export interface HomeCareState extends ReactViewState {
    icon_data?: any[];
    /*用户id */
    id?: any;
    /*账号名 */
    name?: any;
    ServiceProductList?: any;
    page?: any;
    dataSource?: any;
    xm_btn_type?: any;
    sj_btn_type?: any;
    pitrue_list?: any;
    animating?: any;
    show?: any;
    insert?: any;
}
function MyBody(props: any) {
    return (
        <div className="am-list-body my-body" style={{ height: '100%' }}>
            {props.children}
        </div>
    );
}
/**
 * 组件：居家养老首页
 * 描述
 */
export class HomeCare extends ReactView<HomeCareControl, HomeCareState> {
    constructor(props: any) {
        super(props);
        const ds = new ListView.DataSource({
            rowHasChanged: (r1: any, r2: any) => r1 !== r2
        });
        this.state = {
            icon_data: [
            ],
            ServiceProductList: [],
            page: 1,
            dataSource: ds,
            xm_btn_type: 'primary',
            sj_btn_type: 'ghost',
            pitrue_list: [],
            animating: false,
            show: false,
            insert: ''
        };
    }
    grid_click = (_el: any) => {
        if (_el.text === '更多') {
            this.props.history!.push(ROUTE_PATH.serviceType);
        } else if (_el.text === '服务套餐') {
            this.props.history!.push(ROUTE_PATH.serviceProductList + '/' + '服务套餐');
        } else {
            this.props.history!.push(ROUTE_PATH.serviceProductList + '/' + _el.id);
        }
    }
    componentDidMount = () => {
        this.setState({
            animating: true
        });
        AppServiceUtility.service_detail_service.get_service_product_list!({ "sort": "销量", "num": -1 }, 1, 10)!
            .then((datas: any) => {
                console.log(datas);
                let i = 0;
                let pitrue_list: any = [];
                datas.result.map((item: any) => {
                    if (i <= 4) {
                        pitrue_list.push(item.picture_collection[0]);
                        i++;
                    } else {
                        return;
                    }
                });
                console.log('图片？？？？？', pitrue_list);
                this.setState({
                    ServiceProductList: datas.result,
                    pitrue_list,
                    animating: false,
                    show: true
                });
            });
        // 服务类型
        AppServiceUtility.service_operation_service.get_service_type_list!({ 'is_show_app': true, 'is_top': true }, 1, 6)!
            .then((data: any) => {
                console.log('服务类型？？？？？', data);
                let icon_data: any = [{ text: '服务套餐', icon: <FontIcon type="iconziyuan32" style={{ fontSize: '40px' }} /> }];
                if (data.result.length > 0) {
                    data.result.map((item: any) => {
                        let icon = { text: item.name, icon: <img style={{ width: '50px', height: '50px' }} src={item.logo_image} alt="" />, id: item.id };
                        icon_data.push(icon);
                    });
                }
                icon_data.push({ text: '更多', icon: <FontIcon type="iconziyuan11" style={{ fontSize: '40px' }} /> });
                this.setState({
                    icon_data
                });
            });
    }

    /** 下拉事件 */
    onEndReached = () => {
        console.log(11111);
        let new_pape = this.state.page + 1;
        let ServiceProductList = this.state.ServiceProductList;
        AppServiceUtility.service_detail_service.get_service_product_list!({ "sort": "销量", "num": -1 }, new_pape, 10)!
            .then((data: any) => {
                console.log(data);
                let list = [...ServiceProductList, ...data.result];
                this.setState({
                    ServiceProductList: list,
                    page: new_pape
                });
            });
    }

    xmClick = () => {
        this.setState({
            xm_btn_type: 'primary',
            sj_btn_type: 'ghost'
        });
    }

    sjClick = () => {
        this.setState({
            xm_btn_type: 'ghost',
            sj_btn_type: 'primary'
        });
        this.props.history!.push(ROUTE_PATH.serviceProductList + '/' + '服务商');
    }
    goProductDetails = (id: any) => {
        this.props.history!.push(ROUTE_PATH.serviceDetails + '/' + id);
    }

    insert = (value: any) => {
        console.log(value);
        this.setState({
            insert: value
        });
    }

    search = () => {
        this.props.history!.push(ROUTE_PATH.serviceProductList + '/' + '服务项目' + '&' + '' + '&' + this.state.insert);
    }
    render() {
        const renderRow = (owData: any, sectionID: any, rowID: any) => {
            return (
                <Card.Body key={owData} onClick={() => { this.goProductDetails(owData.id); }}>
                    <div style={{ overflow: 'hidden' }}>
                        <div style={{ float: 'left', marginRight: '20px', border: '1px solid', width: '30%' }}>
                            <img src={owData.picture_collection} alt="" style={{ width: '100%', height: '100px' }} />
                        </div>
                        <div style={{ float: 'left', width: '59%' }}>
                            <div style={{ overflow: 'hidden', width: '100%', marginBottom: '10px' }}><div style={{ float: 'left', width: '50%' }}><strong>{owData.name}</strong></div><div style={{ float: 'right' }}><Rate className='product-rate' value={owData.comment_avg} count={5} /></div></div>
                            <div className='content'>{owData.introduce}</div>
                            <div style={{ fontSize: '13px', marginBottom: '15px' }}>{owData.org_info.length > 0 ? owData.org_info[0].name : ''}</div>
                            <div style={{ overflow: 'hidden', width: '100%' }}>
                                <div style={{ float: 'left', width: '30%', color: '#ffb500' }}>{'￥' + (owData.total_price ? owData.total_price : 0)}</div>
                                <div style={{ float: 'right' }}>{owData.pay_count + '人付款'}</div>
                            </div>
                        </div>
                    </div>
                </Card.Body>
            );
        };
        return (
            <div className='home-care'>
                <SearchBar placeholder="请输入服务供应商、服务价格或服务名称" onChange={this.insert} showCancelButton={false} onSubmit={this.search} />
                <div style={{ margin: '0px 10px 0px 10px' }}>
                    <Grid data={this.state.icon_data} activeStyle={true} hasLine={false} columnNum={4} onClick={_el => this.grid_click(_el)} />
                </div>
                <Carousel
                    autoplay={true}
                    infinite={true}
                    autoplaySpeed={2000}
                    style={{ margin: '0px 10px 0px 10px' }}
                >
                    {this.state.pitrue_list.length > 0 ? this.state.pitrue_list!.map((item: any) => (
                        <a
                            className='carousel-a'
                            href="javascript:;"
                            key={item}
                        >
                            <img
                                className='carousel-img'
                                src={item}
                                alt=""
                                onLoad={() => {
                                    window.dispatchEvent(new Event('resize'));
                                }}
                            />
                        </a>
                    ))
                        :
                        (this.state.ServiceProductList.length === 0 && this.state.animating === true ?
                            <div>
                                <div style={{ textAlign: 'center', margin: '20px' }}>
                                    <Spin size="large" />
                                </div>
                            </div>
                            :
                            ''
                        )
                    }
                </Carousel>
                <div className="header">
                    <span className="line" />&nbsp;&nbsp;&nbsp;&nbsp;
                    <span className="text">热门服务</span>&nbsp;&nbsp;&nbsp;&nbsp;
                    <span className="line" />
                </div>
                {this.state.ServiceProductList && this.state.ServiceProductList.length > 0 ?
                    <div style={{ margin: '0px 10px 0px 10px' }}>
                        <ListView
                            ref={(el: any) => this['lv'] = el}
                            dataSource={this.state.dataSource.cloneWithRows(this.state.ServiceProductList)}
                            renderRow={renderRow}
                            initialListSize={10}
                            pageSize={10}
                            renderBodyComponent={() => <MyBody />}
                            style={{ height: document.documentElement.clientHeight }}
                            onEndReached={this.onEndReached}
                        />
                    </div>
                    :
                    (this.state.ServiceProductList.length === 0 && this.state.animating === true ?
                        <div style={{ textAlign: 'center', margin: '20px' }}>
                            <Spin size="large" />
                        </div>
                        :
                        '')
                }
                {this.state.ServiceProductList.length === 0 && this.state.show === true ?
                    <Row className='tabs-content' type='flex' justify='center'>
                        暂无数据
                    </Row>
                    :
                    ''
                }
                <div style={{ position: 'fixed', bottom: '0px', overflow: 'hidden', width: '100%', left: '0px', zIndex: 99 }}>
                    <div style={{ width: '50%', float: 'left', backgroundColor: '#ffffff' }}><Button type={this.state.xm_btn_type} onClick={this.xmClick}>服务项目</Button></div>
                    <div style={{ width: '50%', float: 'left', backgroundColor: '#ffffff' }}><Button type={this.state.sj_btn_type} onClick={this.sjClick}>服务商家</Button></div>
                </div>
            </div>
        );
    }
}

/**
 * 控件：居家养老首页控制器
 * 描述
 */
@addon('HomeCare', '居家养老首页', '描述')
@reactControl(HomeCare, true)
export class HomeCareControl extends ReactViewControl {
    constructor() {
        super();
    }
}